<script setup lang="ts">
import { ref } from 'vue'
import { VxeModal } from 'vxe-pc-ui'

const modalBgRadio = (806 / 1410).toFixed(2) as unknown as number

const modalVisible = ref(false)
const modalConfig = ref({
  className: 'cdcModal',
  showHeader: false,
  width: '62.5%', //'75%',
  // height: window.innerWidth * 0.75 * modalBgRadio,
  // resize: true,
  // showTitleOverflow: true,
})
const props = defineProps({
  data: {
    type: Object,
    default: () => {
      title: ''
    },
  },
})
const showModal = () => {
  modalVisible.value = true
}

defineExpose({
  showModal,
})
</script>

<template>
  <vxe-modal v-model="modalVisible" v-bind="modalConfig" title="ss" height="80vh">
    <img src="@/assets/images/modal-bg.png" alt="" width="100%" height="100%" />
    <img
      class="close w-30px h-30px top-[-14px] right-[-14px]"
      src="@/assets/images/icon_off.png"
      @click="modalVisible = false"
      alt=""
    />
    <div class="position-absolute inset-0">
      <div class="flex flex-col p-48px h-[100%]">
        <header class="title mt-10px mb-20px">
          <span class="text-34px text-white">{{ props?.data?.title }}</span>
        </header>
        <div class="content p-20px overflow-scroll!">
          <slot></slot>
        </div>
      </div>
    </div>
  </vxe-modal>
</template>

<style lang="scss" scoped>
.title {
  text-align: center;
  color: #fff;
  position: relative;
  text-indent: -0.8em;
}
.close {
  position: absolute;
  z-index: 99;
  cursor: pointer;
}
</style>
<style>
.cdcModal {
  color: #fff;
  .vxe-modal--box {
    width: 100%;
    /* background-image: url('../../assets/images/modal-bg.png'); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: transparent;
    border: 0;
    box-shadow: none !important;
    .vxe-modal--container {
      overflow: visible;
      .vxe-modal--body {
        overflow: visible;
      }
    }
    .content {
      border-radius: 8px;
      /* background-color: #0f1e31; */
      overflow: hidden;
    }
  }
}
</style>
